import React from 'react'
import {Outlet,NavLink} from 'react-router-dom'
import { mainRouter } from '../router/routerConfig';
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons';

function Home() {
  return (
    <div className='Homes'>
        <header>
            头部
        </header>
        <main>
            <Outlet></Outlet>
        </main>
        <footer>
            <Tabbar>
                {
                    mainRouter.length ? mainRouter.map((item,index)=>{
                        return <Tabbar.Item icon={<HomeO />} key={index} >
                            <NavLink to={item.path}>
                                {item.title}
                            </NavLink>
                        </Tabbar.Item>
                    }):'暂无数据'
                }
            {/* <Tabbar.Item icon={<HomeO />}>标签</Tabbar.Item>
            <Tabbar.Item icon={<Search />}>标签</Tabbar.Item>
            <Tabbar.Item icon={<FriendsO />}>标签</Tabbar.Item>
            <Tabbar.Item icon={<SettingO />}>标签</Tabbar.Item> */}
            </Tabbar>
        </footer>
    </div>
  )
}

export default Home